<template>
  <view class="container">
    <view class="screen">{{ result }}</view>
    <view class="buttons">
    <view class="row" v-for="(row, index) in buttons" :key="index">
      <button class="button" v-for="button in row" @click="handleClick(button)">
        {{ button }}
      </button>    
    </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: '0',
       buttons: [
              'C', '7', '8', '9', // 第一行，包含清除按钮
              'x', '4', '5', '6', // 第二行
              '*', '1', '2', '3', // 第三行
              '-', '0', '=', '+', // 第四行，包含删除按钮和加号
              '/', '.', '(', ')', // 第五行，包含等于号和正负号按钮
            ].flat() // 使用flat()方法将二维数组转换为一维数组

    };
  },
 methods: {
   handleClick(button) {
     if (button === '=') {
       try {
         this.result = eval(this.result);
       } catch (e) {
         this.result = 'Error';
       }
     } else if (button === 'C') {
       this.result = '0';
     } else if (button === 'x') {
       this.result = this.result.slice(0, -1); // 删除最后一个字符
     } else {
       this.result = this.result === '0' ? button : this.result + button;
     }
   }
 },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.screen {
  width: 100%;
  height: 50px;
  font-size: 30px;
  text-align: right;
  margin-bottom: 10px;
}
.buttons {
  display: grid;
  grid-template-areas: "button1 button2 button3 button4"
               "button5 button6 button7 button8"
               "button9 button10 button11 button12"
               "button13 button14 button15 button16";
  gap: 10px;
}
.button {
  width: 10vh;
  height: 10vh;
  font-size: 25px;
  border: none;
  border-radius: 0;
  background-color: #e0e0e0;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 5px;
}
.button:hover {
  background-color: #d0d0d0;
}
</style>